<template>
    <div>
        <!--头部-->
        <div class="front-header position" >
            <div class="front-header-left">
                <img src="../../public/logo.png" alt="" style="width: 50px; height: 50px">
                <div class="title">阿良商场</div>
            </div>
            <div class="front-header-center">
                <div class="front-header-nav">
                    <el-menu :default-active="$route.path" mode="horizontal" router>
                        <el-menu-item index="/front/home">首页</el-menu-item>
                        <el-menu-item @click="navToPerson">个人中心</el-menu-item>
                    </el-menu>
                </div>
            </div>
            <div class="front-header-center" style="text-align: right">
                <el-input style="width: 200px" placeholder="请输入商品名称" v-model="name"></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="search">搜素</el-button>
            </div>
            <div class="front-header-right">
                <div v-if="!user.username">
                    <el-button @click="$router.push('/login')">登录</el-button>
                    <el-button @click="$router.push('/register')">注册</el-button>
                </div>
                <div v-else>
                    <el-dropdown>
                        <div class="front-header-dropdown">
                            <img @click="navToPerson" :src="user.avatar" alt="">
                            <div style="margin-left: 10px">
                                <span>{{ user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
                            </div>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div style="text-decoration: none" @click="navTo('/front/collect')">我的收藏</div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div style="text-decoration: none" @click="logout">退出</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <!--主体-->
        <div class="main-body">
            <div style="margin-top: 50px" class="floating-button">
                <div class="floating" @click="navTo('/front/collect')">
                    <el-tooltip class="item" effect="dark" content="我的收藏" placement="left">
                            <el-button round>
                                <img src="@/assets/imgs/ico/收藏.png" alt="" style="height: 25px; width: 25px">
                            </el-button>
                    </el-tooltip>
                </div>
                <div class="floating" @click="navTo('/front/address')">
                    <el-tooltip class="item" effect="dark" content="我的地址" placement="left">
                        <el-button round>
                            <img src="@/assets/imgs/ico/店铺.png" alt="" style="height: 25px; width: 25px">
                        </el-button>
                    </el-tooltip>
                </div>
                <div class="floating" @click="navTo('/front/cart')">
                    <el-tooltip class="item" effect="dark" content="我的购物车" placement="left">
                        <el-badge :value="cartNum" class="item">
                            <el-button round>
                                <img src="@/assets/imgs/ico/购物车.png" alt="" style="height: 25px; width:
                                25px">
                            </el-button>
                        </el-badge>
                    </el-tooltip>
                </div>
                <div class="floating" @click="navTo('/front/orders')">
                    <el-tooltip class="item" effect="dark" content="我的订单" placement="left">
                        <el-button round>
                            <img src="@/assets/imgs/ico/订单.png" alt="" style="height: 25px; width: 25px">
                        </el-button>
                    </el-tooltip>
                </div>
            </div>
            <router-view ref="child" @update:user="updateUser" @update:cart:value="updateCartNum" />
        </div>

    </div>
</template>

<script>

export default {
    name: "FrontLayout",

    data() {
        return {
            top: '',
            notice: [],
            user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
            name: "",
            cartNum: 0,
        }
    },

    mounted() {
        if (this.user.id && !(this.user.role === "USER"))
            this.$router.push('/home')
        this.loadNotice()
    },
    methods: {

        loadCartNum() {
            if (this.user.id) {
                this.$request.get(`/cart/getCount`)
            }
        },
        search() {
            let name = this.name ? this.name : ''
            location.href = '/front/search?name=' + name
        },
        loadNotice() {
            this.$request.get('/notice/selectAll').then(res => {
                this.notice = res.data
                let i = 0
                if (this.notice && this.notice.length) {
                    this.top = this.notice[0].content
                    setInterval(() => {
                        this.top = this.notice[i].content
                        i++
                        if (i === this.notice.length) {
                            i = 0
                        }
                    }, 2500)
                }
            })
        },
        updateUser() {
            this.user = JSON.parse(localStorage.getItem('xm-user') || '{}')   // 重新获取下用户的最新信息
        },
        updateCartNum(cartNum) {
            this.$message.info("添加购物车成功！")
            this.cartNum+=cartNum
        },
        // 退出登录
        logout() {
            localStorage.removeItem("xm-user");
            this.$router.push("/login");
        },
        navToPerson() {
            if (!this.user.id) {
                this.$confirm('您还没登录，是否现在前往登录？', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/login');
                }).catch(() => {
                    this.$router.push('/front/home');
                });
            } else {
                location.href = '/front/person'
            }
        },
        navTo(url) {
            if (!this.user.id) {
                this.$confirm('您还没登录，是否现在前往登录？', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/login');
                }).catch(() => {

                });
            } else {
                location.href = url
            }
        },
    }

}
</script>

<style scoped>
@import "@/assets/css/front.css";

.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: none;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    padding: 10px 20px;
}


.position {
    position: fixed;
    width: 100%;
    z-index: 4;
    margin: 0 0;
}

.floating {
    margin-bottom: 10px;
}
</style>